<template>
	<view class="card" :class="{ shadow }">
		<view v-if="title" class="card-header">
			<text class="title">{{ title }}</text>
			<view class="extra" v-if="$slots.extra">
				<slot name="extra"></slot>
			</view>
		</view>
		<view class="card-body">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
defineProps({
	title: String,
	shadow: {
		type: Boolean,
		default: true
	}
})
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx;
	overflow: hidden;
	
	&.shadow {
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.extra {
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.card-body {
		padding: 30rpx;
	}
}
</style> 